<template>
  <div>
    <!-- v-model="变量"  变量和输入框 会进行一个双向绑定   -->
    <!-- 变量的值 会显示输入框的value属性里面 -->
    <!-- 如果输入框的值改变了，立刻就影响变量title的值 -->
    <input type="text" name="" id="" v-model="title" />
    {{ title }}
    <button @click="send()">发布</button>

    <div v-show="isEditing">
      <input type="text" name="" id="" v-model="editObj.title" />
      <input type="checkbox" name="" id="" :checked="editObj.isCompleted"
        @change="editObj.isCompleted = !editObj.isCompleted" />
      <button @click="saveFn()">保存</button>
    </div>

    <ul>
      <li v-for="(item, index) in showArr" :key="item.time" :style="{ color: item.isCompleted ? 'red' : 'gray' }">
        <input type="checkbox" name="" id="" :checked="item.isCompleted" @change="item.isCompleted = !item.isCompleted" />

        <p :class="item.isCompleted ? 'com' : ''">{{ item.title }}</p>
        <p :class="{ com: item.isCompleted }">{{ item.title }}</p>
        <!-- 插入了 函数返回值 -->
        {{ formatDate(item.time) }}

        <!-- 删除按钮的点击的时候， 删除数组中对应的元素 -->
        <button @click="DeleteFn(item)">删除</button>
        <button @click="editFn(item, index)">编辑</button>
      </li>
    </ul>
    剩余{{ arr.filter((v) => v.isCompleted == false).length }}个未完成
    <hr />

    剩余{{ leftNum }}个未完成

    <hr />

    <button @click="showAll" :class="{ ac: current == 0 }">全部</button>
    <button @click="showUnCom" :class="{ ac: current == 1 }">进行中</button>
    <button @click="showCom" :class="{ ac: current == 2 }">已完成</button>

    <hr />
    <button @click="clearFN" v-show="arr.some((v) => v.isCompleted == true)">
      清空已完成
    </button>
  </div>
</template>
<script>
/*
  计算缺点：
      -不能有副作用，只能用来计算（根据data中数据计算出结果）
    所谓副作用-就是不能修改其他数据
      -不能有异步操作

*/
export default {
  computed: {
    leftNum() {
      //计算不能有副作用
      // this.arr.push({ title: "" });

      // 异步操作计算结果

      // setTimeout(() => {
      //   return this.arr.filter((v) => v.isCompleted == false).length;
      // }, 2000);

      return this.arr.filter((v) => v.isCompleted == false).length;
    },
  },
  methods: {
    DeleteFn(v) {
      this.arr.splice(this.arr.findIndex(i => i.time === v.time), 1);
      // 刷新列表展示数组，数据驱动页面  ·
      switch (this.current) {
        case 0:
          this.showArr = this.arr;
          break;
        case 1:
          this.showArr = this.arr.filter((v) => v.isCompleted == false);
          break;
        case 2:
          this.showArr = this.arr.filter((v) => v.isCompleted == true);
          break;
      }
    },
    showAll() {
      this.showArr = this.arr;
      this.current = 0;
    },
    showCom() {
      this.showArr = this.arr.filter((v) => v.isCompleted == true);
      this.current = 2;
    },
    showUnCom() {
      this.showArr = this.arr.filter((v) => v.isCompleted == false);
      this.current = 1;
    },
    clearFN() {
      // 删除arr中已经完成的
      // this.arr = ; (过滤出未完成的 赋值arr)
      this.arr = this.arr.filter((v) => v.isCompleted == false);
      //arr给showArr
      // 判断--current 等于多少 把对应数据赋值 给 showArr
      // this.showArr = this.arr;
      switch (this.current) {
        case 0:
          this.showArr = this.arr;
          break;
        case 1:
          this.showArr = this.arr.filter((v) => v.isCompleted == false);
          break;
        case 2:
          this.showArr = this.arr.filter((v) => v.isCompleted == true);
          break;
      }
    },
    send() {
      console.log("点击了按钮");
      //获取输入框的值
      console.log(this.title);
      //创建一个对象(保存输入的数据) 添加到arr 中
      //--发布标题 和 发布时间

      //发布时候，给数组中元素--添加一个属性 isCompleted 记录 当前行是否完成
      let obj = { title: this.title, time: Date.now(), isCompleted: false };
      this.arr.push(obj);

      console.log(this.arr);

      //清空输入框的值
      this.title = "";
    },
    formatDate(time) {
      //把时间戳转为 时分秒 字符串
      let date = new Date(time);
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (s < 10) {
        s = "0" + s;
      }

      let res = h + ":" + m + ":" + s;
      return res;
    },
    editFn(item, i) {
      console.log("点击了编辑按钮");
      this.isEditing = true;
      //把要编辑的数据保存起来-data
      console.log(item);

      //item是中元素对象--》地址

      // 地址传递--》editObj和item的地址一样-
      // 页面通过双向绑定，绑定editObj，等同绑定item -数组的元素
      // 一旦修改editObj，li会改变，修改div中input也会改变
      // this.editObj = item;

      //做了浅拷贝--把item的属性都添加到 一个新对象中（修改editObj和原数组没有关系了）
      // item只有一层数据，浅拷贝等同于深拷贝
      this.editObj = { ...item };
      // this.editObj = JSON.parse(JSON.stringify(item));
      this.editIndex = i;
    },

    saveFn() {
      //保存=按钮被点击
      //获取编辑侯的数据，修改数组中对应的元素的数据
      console.log(this.editObj);
      console.log(this.editIndex);

      //通过全局data记录 要编辑的数据在数组中下标
      // this.arr[this.editIndex] = this.editObj;

      //找数组中的元素的time属性 和 editObj的time相等的元素的 下标
      // let index = this.arr.indexOf()//只时候找 字符串数组和 数字数组的元素的下标

      //findIndex  找到数组中满足条件第一个元素的下标
      //find 找到数组中满足条件的第一个元素
      let index = this.arr.findIndex((v, i) => {
        // return 条件
        return v.time == this.editObj.time;
      });
      console.log(index);
      this.arr[index] = this.editObj;

      //隐藏编辑框
      this.isEditing = false;
    },
  },
  mounted() {
    //页面加载完毕以后，默认展示是全部，showArr 等于arr
    this.showArr = this.arr;
  },
  data() {
    return {
      current: 0, //记录选中的选项-默认是0 表示全部 1 -进行中 2-已经完成
      // 全局变量--》可以 模板中元素 进行绑定
      title: "hello",
      arr: [], //保存所有列表数据
      showArr: [], //showArr 列表中展示的数据用从arr提取，放入showArr

      // isCompleted: true,

      isEditing: false, //记录是否正在编辑-初始值false-打开页面以后是没有处于编辑状态的

      //记录要编辑的数据
      editObj: {},
      //要编辑数据的下标
      editIndex: 0,
    };
  },
};

// todo
</script>
<style>
.com {
  /* 中划线 */
  text-decoration: line-through;
}

.ac {
  color: red;
  background-color: gray;
}
</style>
